<template>
	<view>
		<page-head :transparent='false'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
		</page-head>
		<view class="banner">
			<image class="banner-img" :src="banner.image_url"></image>
			<view class="banner-title">{{banner.title}}</view>
		</view>
		<view class="article-meta">
			<text class="article-author">{{banner.source}}</text>
			<text class="article-text">发表于</text>
			<text class="article-time">{{banner.datetime}}</text>
		</view>
		<view class="article-content">
			<rich-text :nodes="content"></rich-text>
		</view>
		<view class="comment-wrap"></view>

		<view style="height: 80px;"></view>
		<view class="news-detail-bottom">
			<view class="news-detail-row">
				<view class="news-detail" @click="userComment">
					<image src="../../static/img/news/pinglun.png" mode="scaleToFill"></image>
				</view>
				<view class="news-detail" @click="pointPraise(banner.id)">
					<image :src="unDianZan" mode="scaleToFill" v-if="dian === 0"></image>
					<image :src="dianZan" mode="scaleToFill" v-else></image>
				</view>
				<view class="news-detail">
					<image src="../../static/img/news/more.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>

		<view class="news-detail-comment" v-if="userClickCom">
			<view class="comment-row">
				<textarea placeholder="友善的发言更受欢迎哦~,500字以内" v-model="comments" maxlength="500" />
				</view>
			<view class="comment-send">
				<view class="send-row">
					<text class="sendto-quit">取消</text>
					<text class="sendto-out">发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import unDianZan from '../../static/img/news/unselect-dianzan.png';
	import dianZan from '../../static/img/news/select-dianzan.png'
	const FAIL_CONTENT = '<p>获取信息失败</p>';
	export default {
		data() {
			return {
				banner: {},
				content: '',
				title: '新闻资讯',
				dian: 0,
				unDianZan,
				dianZan,
				comments:'',
				userClickCom:false
			}
		},
		onShareAppMessage() {
			return {
				title: this.banner.title,
				path: '/pages/detail/detail?query=' + JSON.stringify(this.banner)
			}
		},
		onLoad(event) {
			// 目前在某些平台参数会被主动 decode，暂时这样处理。
			try {
				this.banner = JSON.parse(decodeURIComponent(event.query));
			} catch (error) {
				this.banner = JSON.parse(event.query);
			}

			this.getDetail();
			this.title = this.banner.title;
			/* uni.setNavigationBarTitle({
				title: this.banner.title
			}); */
		},
		methods: {
			userComment(){
				this.userClickCom = true;
			},
			quitComment(){
				this.userClickCom = false;
			},
			getDetail() {
				uni.request({
					url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + this.banner.post_id,
					success: (result) => {
						if (result.statusCode == 200) {
							this.content = result.data.content;
						} else {
							this.content = FAIL_CONTENT;
						}
					}
				});
			},
			pointPraise(id) {
				if (this.dian === 0) {
					this.dian = 1;
				} else {
					this.dian = 0;
				}
			}
		}
	}
</script>

<style lang="scss">
	
	.news-detail-comment{
		width: 100%;
		height: 600px;
		position: fixed;
		bottom: 0px;
		background-color: #EEEEEE;
		display: flex;
		flex-direction: column;
		.comment-row{
			width: 100%;
			height: 540px;
			textarea{
				width: 100%;
				height: 100%;
			}
			border-block-end: #CCCCCC solid 1upx;
		}
		.comment-send{
			width: 100%;
			height: 60px;
			.send-row{
				width: 100%;
				font-size: 24px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.sendto-quit{
					width: 50%;
					display: flex;
					align-items: center;
				}
				.sendto-out{
					width: 50%;
					display: flex;
					align-items: center;
				}
			}
		}
	}
	
	.news-detail-bottom {
		width: 100%;
		height: 80px;
		position: fixed;
		bottom: 0;
		overflow: scroll;
		background-color: white;

		.news-detail-row {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			.news-detail {
				width: 160px;
				height: 80px;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 40px;
					height: 40px;
				}
			}
		}
	}

	.banner {
		height: 360px;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84px;
		overflow: hidden;
		position: absolute;
		left: 30px;
		bottom: 30px;
		width: 90%;
		font-size: 32px;
		font-weight: 400;
		line-height: 42px;
		color: white;
		z-index: 11;
	}

	.article-meta {
		padding: 20px 40px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}

	.article-text {
		font-size: 26px;
		line-height: 50px;
		margin: 0 20px;
	}

	.article-author,
	.article-time {
		font-size: 30px;
	}

	.article-content {
		padding: 0 30px;
		overflow: hidden;
		font-size: 30px;
		margin-bottom: 30px;
	}
</style>
